<HTML>
 <HEAD>
  <TITLE> Ajax地域联动 </TITLE>
  <meta http-equiv=Content-Type content="text/html;charset=utf-8"/>
  <script type="text/javascript" src="__PUBLIC__/Js/jquery-1.7.2.min.js"></script>
  		<script src="__PUBLIC__/selectjs/jquery.easydropdown.js"></script>
  			
		<!--[if lt IE 9]>
			<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
			<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
		<![endif]-->
		
		<link rel="stylesheet" type="text/css" href="__PUBLIC__/selectjs/demo.css"/>
		<link rel="stylesheet" type="text/css" href="__PUBLIC__/selectjs/themes/easydropdown.css"/>
	
	
  <script>
   function loadArea(areaId,areaType) {
	    $.post(ajaxurl,{'areaId':areaId},function(data){
	        if(areaType=='city'){
	           $('#'+areaType).html('<option value="-1">市/县</option>');
	           $('#district').html('<option value="-1">镇/区</option>');
	        }else if(areaType=='district'){
	           $('#'+areaType).html('<option value="-1">镇/区</option>');
	        }
	        if(areaType!='null'){
	            $.each(data,function(no,items){
	            	 opt = $("<option/>").text(items.area_name).attr("value", items.area_id);
	                $('#'+areaType).append(opt);
	            });
	            $(".dropdown").easyDropDown({
	            	 'cutOff': 10,
	            	'destroy':true
	            });
	         
	        }
	    });
	} 
  </script>
  <script>var ajaxurl="{:U('Ajax/getArea')}";</script>
  <script>
  		//$(function(){
  			
  			
  			/* 
		        
  			
  			    var $selects = $('#province');
  			         flag = false;                 
  			    $selects.easyDropDown({
  			        cutOff: 10,
  					disabled:false,
  			        onChange: function(drop){
  				    
					var areaType =$(this).attr("key");
					
					alert(areaType)
		  			 $.post("{:U('Ajax/getArea')}",{'areaId':drop.value},function(data){
		  		        if(areaType=='city'){
		  		           $('#'+areaType).html('<option value="-1">市/县</option>');
		  		           $('#district').html('<option value="-1">镇/区</option>');
		  		        }else if(areaType=='district'){
		  		           $('#'+areaType).html('<option value="-1">镇/区</option>');
		  		        }
		  		        if(areaType!='null'){
		  		            $.each(data,function(no,items){
		  		                $('#'+areaType).append('<option value="'+items.area_id+'">'+items.area_name+'</option>');
		  		            });
		  		            
		  		       	   $("select#district").easyDropDown('destroy');
	                        $("select#city").easyDropDown('destroy');
	                        $("select#district").easyDropDown();
	                        $("select#city").easyDropDown();
		  		        }
		  		     
		  		        
		  		    });
						
  			        }
  			    }); 
  			}); */
  		
  		
  
  </script>
  
 </HEAD>
 <BODY>
 <div style="width:700px;margin:40px auto;">
    <select name="province"data-settings='{"cutOff":10}' class="dropdown" id="province" key="city" onchange="loadArea(this.value,'city')">
        <option value="-1" selected>省份/直辖市</option>
        <volist name="province" id="one">
            <option value="{$one.area_id}">{$one.area_name}</option>
        </volist>
    </select>
    <select name="city"  class="dropdown" id="city"  key="district" onchange="loadArea(this.value,'district')">
        <option value="-1">市/县</option>
    </select>
    <select name="district"  class="dropdown" id="district" style="display:none" key="null" onchange="loadArea(this.value,'null')">
        <option value="-1">镇/区</option>
    </select>
   </div>
 </BODY>
</HTML>